<template>
  <!-- 保洁时间间隔 -->
  <div class="targetStatisticsHeadScore">
    <div ref="dom" class="dome"></div>
  </div>
</template>
<script  setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick  } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let dom = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(dom.value);
  const option = {
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: 0,
      },
      {
        show: true,
        type: "slider",
        xAxisIndex: 0,
        textStyle: {
          color: "#26FFFF",
        },
        backgroundColor: "#194FAB",
        dataBackground: {
          lineStyle: {
            color: "#597F97",
          }, // 阴影的线条样式
          areaStyle: {
            color: "#597F97",
          }, // 阴影的填充样式
        },
        borderColor: "#046291",
        top: "95%",
        start: 98,
        end: 100,
      },
    ],
    tooltip: {
      axisPointer: {
        type: "shadow",
      },
      trigger: "axis",
      textStyle: {
        align: "left",
      },
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    legend: {
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        color: "#90D4F8",
        align: "left",
      },
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.carData.time,
      axisLabel: {
        show: true,
        align: "center",
        margin: 15,
        textStyle: {
          color: "#90D4F8",
        },
      },
      axisLine: {
        show: false,
        interval: 0,
        lineStyle: {
          color: "#468C9E",
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#213862",
          width: 1,
          type: "solid",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "区间桩号数量",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#213862",
            width: 1,
            type: "solid",
          },
        },
        axisLine: {
          show: false,
          interval: 0,
          lineStyle: {
            color: "#468C9E",
            type: "solid",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#90D4F8",
          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: "value",
        name: "评分",
        min: 0,
        max: 75,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#213862",
            width: 1,
            type: "solid",
          },
        },
        axisLine: {
          show: false,
          interval: 0,
          lineStyle: {
            color: "#468C9E",
            type: "solid",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#90D4F8",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "区间桩号总数",
        type: "bar",
        barWidth: 10,
        label: {
          show: false,
          position: "top",
        },
        data: props.carData.totalnum,
        itemStyle: {
          color: "#079FFF",
        },
      },
      {
        name: "区间桩号数量",
        type: "bar",
        barWidth: 10,
        label: {
          show: false,
          position: "top",
        },
        barGap: "-100%",
        data: props.carData.num,
        itemStyle: {
          color: "#FFA500",
        },
      },
      {
        name: "评分",
        type: "line",
        symbolSize: 10,
        symbol: "circle",
        label: {
          show: false,
          position: "bottom",
        },
        color: ["#079FFF"],
        yAxisIndex: 1,
        markLine: {
          symbol: "none",
          itemStyle: {
            normal: {
              borderWidth: 1,
              lineStyle: {
                color: "red ",
                width: 1,
              },
              label: {
                textStyle: {
                  fontSize: 16,
                  fontWeight: "bolder",
                },
              },
            },
          },
          data: [{ yAxis: 75, name: "平均值" }],
        },
        data: props.carData.avgscore,
        itemStyle: {
          color: "#6FC61D",
        },
      },
    ],
  };
  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};
// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>
<style scoped>
.dome,
.targetStatisticsHeadScore {
  width: 100%;
  height: 100%;
}
</style>